// 该文件是webpack的配置文件，用于指挥webpack如何工作
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 引入Node中内置的path模块，用于处理路径
const path = require('path');
// 引入mini-css-extract-plugin用于提取css为单独文件
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
//引入optimize-css-assets-webpack-plugin用于压缩css
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

// 使用CJS的规范，暴露出去一个对象，该对象中就是webpack的详细配置
module.exports = {
	// 指定入口
  entry: './src/js/app.js',
	// 指定出口
  output: {
    filename: 'js/app.[contenthash:10].js', // 最终生成js的名
    path: path.resolve(__dirname, '../build/') ,//最终生成js的位置
		publicPath:'/'
  },
	// 工作模式
	mode:'development',
	// 配置loader
	module: {
    rules: [ // rules中配置着一个一个的规则
			// 用于处理css文件
      {
        test: /\.css$/, // 匹配所有后缀为.css的文件
        use: [ MiniCssExtractPlugin.loader, 'css-loader','postcss-loader' ]
      },
			// 用于处理less文件
			{
				test: /\.less$/, // 匹配所有后缀为.less的文件
				use: [
					MiniCssExtractPlugin.loader,
					'css-loader',   //将css变成commonjs模块加载js中，里面内容是样式字符串
					'postcss-loader',
					'less-loader'   //将less文件编译成css
				]
			},
			// 用于处理样式中的图片
			{
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
							outputPath:'imgs',//图片的输出路径
							name:'[hash:10].[ext]',
							limit: 8 * 1024 //图片转base64的阈值
						}
          }
        ]
      },
			// 用于处理html中的图片
			{
				test: /\.(html)$/,
				use: {
					loader: 'html-loader',
				}
			},
			// 用于处理字体文件
			{
				exclude: /\.(html|js|css|less|jpg|png|gif)/,
				use:[
					{
						loader: 'file-loader',
						options:{
							outputPath:'media',
							name:'[hash:10].[ext]',
						}
					}
				]
			},
			{
				test: /\.js$/,                  //只检测js文件
				exclude: /node_modules/,        //排除node_modules文件夹
				enforce: "pre",                 //提前加载使用
				use: ['eslint-loader']
			},
			{
				test: /\.js$/,
				exclude: /node_modules/,
				use: {
					loader: "babel-loader",
					options: {
						presets: [
							[
								'@babel/preset-env',
								{
									useBuiltIns: 'usage',  // 按需引入(需要使用polyfill)
									corejs: { version: 3 }
								}
							]
						]
					}
				}
			}  
    ]
  },
	// 配置插件
	plugins:[
		//创建一个HtmlWebpackPlugin的实例对象
		new HtmlWebpackPlugin({
			template:'./src/index.html',
		}),
		//提取css为单独文件
		new MiniCssExtractPlugin({
			// 对输出的css文件进行重命名
			filename: 'css/index.[contenthash:10].css',
		}),
		// 压缩css
		new OptimizeCssAssetsPlugin({
			cssProcessorPluginOptions: {
				preset: [
					'default', 
					{ discardComments: { removeAll: true } }],
			}
		}),
		//清空打包目录
		new CleanWebpackPlugin()
	],
};